<script lang="ts" setup>
 // 导入 
 import { getCurrentInstance } from 'vue';
 // 接收父组件传递的值
 defineProps<{ page: any }>()

 // 获取当前组件的实例 
 const _this = getCurrentInstance() as any;


 // 修改页码 
 const handlePageChange = () =>{
     // 如果能够执行父组件的getStaffs方法就可以！！！！！
     _this.parent.proxy.getData();

 }
 // 修改每页的数量
 const handleSizeChange = () =>{
      _this.parent.proxy.getData();
 }
</script>

<template>
 <el-pagination
    v-model:currentPage="page.page"  
    v-model:page-size="page.size"
    :page-sizes="[2, 17, 100, 200, 300, 400]"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.total"
    @size-change="handleSizeChange"
    @current-change="handlePageChange"
    style="margin-top: 10px;"
  />
</template>

<style scopeds>
</style>